<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Eyered - Create cover</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta property="og:title" content="Cover easy design" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="http://apps.facebook.com/covereasydesign/" />
        <meta property="og:image" content="" />
        <meta property="og:site_name" content="" />
        <meta property="fb:app_id" content="113698288782115"/>
        <meta property="og:description" content="" />
        <link rel="stylesheet" href="<?php echo base_url(); ?>themes/base/jquery.ui.all.css">
        <script type='text/javascript' src='<?php echo base_url(); ?>jquery.js'></script>		
        <script src="<?php echo base_url(); ?>ui/jquery.ui.core.js"></script>
        <script src="<?php echo base_url(); ?>ui/jquery.ui.widget.js"></script>
        <script src="<?php echo base_url(); ?>ui/jquery.ui.mouse.js"></script>
        <script src="<?php echo base_url(); ?>ui/jquery.ui.draggable.js"></script>
        <link href="<?php echo base_url(); ?>style.css" type="text/css" rel="stylesheet"/>		
        <script type='text/javascript' src='<?php echo base_url(); ?>jquery.jcarousel.min.js'></script>
        <script type='text/javascript' src='<?php echo base_url(); ?>jquery.form.js'></script>
        <script type='text/javascript' src='<?php echo base_url(); ?>caman.full.min.js'></script>
    </head>
    <body>
        <div id="fb-root"></div>
        <script src="//connect.facebook.net/ja_JP/all.js"></script>
        <script type="text/javascript">
            window.fbAsyncInit = function()  {
                FB.init({
                    appId  : '113698288782115',
                    oauth  : true
                });
                FB.Canvas.setAutoGrow();
            };
            //FB.Canvas.scrollTo(0, 0);
        </script>		
        <script type="text/javascript">		
            var html = "";
            var userid = '<?php echo $user['id'] ?>';
            var image_select = "";
            $(document).ready(function() {    					
                $('#list').jcarousel({						
                    itemFallbackDimension: 125				
                });	
              
                html = $(".list-image");
                $( "#target_image" ).draggable({ axis: "y" });
                $("#container-image").mouseover(function () {
                    $("#target_image").css("z-index","1001");
                    $("#target_image").css("opacity","0.7");
                });
                $("#container-image").mouseout(function () {
                    $("#target_image").css("z-index","998");
                    $("#target_image").css("opacity","1");
                });
				
            });		
			function scrollTo(y){
				FB.Canvas.getPageInfo(function(pageInfo){
						$({y: pageInfo.scrollTop}).animate(
							{y: y},
							{duration: 1000, step: function(offset){
								FB.Canvas.scrollTo(0, offset);
							}
						});
				});
			}
            function chooseImage(url){
                image_select = url;
                //$("#convert_target_image").attr("src","http://localhost<?php echo base_url(); ?>caman_proxy.php?url="+url);
                $("#target_image").attr("src",url).show().css("top","0").css("left","0");
				scrollTo($('#container-image').offset().top);
                createColorEffect("<?php echo base_url(); ?>caman_proxy.php?cw=67&ch=50&h=50&url="+url);
                $("#color-select-container").show();
				
            }
            function startCrop(){
                var url = $("#target_image").attr("src");
                var y = 0-$("#target_image").position().top;
                var x = 0-$("#target_image").position().left;
                if(x<0){
                    alert("<?php echo lang('createcover_errorposition') ?>");
                }
                else{
                    $("#target_image").css("z-index","1001");
                    $("#target_image").css("opacity","0.7");
                    $("#target_image_loading").show();
                    $.ajax({					  
                        url: "<?php echo base_url(); ?>index.php/processimage/process",					  
                        type: "POST",
                        data: {
                            url : url,
                            x:x,
                            y:y,
                            userid:userid
                        },
                        dataType: "json",
                        success: function(data) {
                            window.location.href = "<?php echo base_url(); ?>index.php/view/coverresult?ext=" +data.ext
                        }					
                    });
                }
            }
            function loadAlbums(){
                $(".list-image").remove();		
                $("#loading").show();
                $("#show").append(html);
                $('.list-image').jcarousel({						
                    itemFallbackDimension: 125,					
                });	
                $("#loading").hide();
                $("#album_name").html("Albums <?php echo lang('createcover_of') ?> <?php echo $user['name'] ?>")
                $("#number_item").html("<?php echo "(" . count($albums) . ")" ?>")
            }
            function loadPhotosAlbum(aid,album_name){
                $(".list-image").remove();		
                $("#loading").show();
                $("#album_name").html("Album "+album_name);
                $("#number_item").html("(<?php echo lang('createcover_loading') ?>)");
                $.ajax({					  
                    url: "<?php echo base_url(); ?>index.php/view/loadalbum",					  
                    type: "GET",
                    data: {aid : aid},
                    dataType: "html",
                    success: function(data) {
                        $("#loading").hide();
                        $("#show").append(data);
                        $("#number_item").html("("+$("#photos_number_item").html()+")");
                        $('.list-image').jcarousel({						
                            itemFallbackDimension: 125				
                        });	
                    }					
                });
            }	
            function callbackUpload(data){
                if(data.message == 1){
                    chooseImage("<?php echo base_url(); ?>uploads/"+data.upload_data);
                }
                else{
                    alert(data.error);
                }
                $(".upload_loading").hide();
                       
            }
            $(document).ready(function() { 
                $('#image_file_upload').live('change', function()			{ 
                    $(".upload_loading").show();
                    $("#imageform").ajaxForm({
                        dataType:  'json', 
                        success:   callbackUpload
                    }).submit();
		
                });
            }); 
        </script>
        <div id="wrapper2">
            <div id="header">
                <img src="<?php echo base_url(); ?>images/logo.png" alt="error"/>
                <p>mobile - design - software solution - <a style="color:#A5A5A5"href="http://eyered.net">eyered.net</a></p>            
            </div><!--End #Logo-->
            <div id="content2">
                <div id="topcv2">
                    <form id="imageform" method="post" enctype="multipart/form-data" action='<?php echo base_url(); ?>index.php/processimage/uploadImage'>
                        <div id="container_upload_button">
                            <input id="image_file_button"onclick="" type="button" style="<?php if ($locale != "vi_VN") echo "padding-left: 31px;font-size: 1em;" ?>" value="<?php echo lang('button_choosefile') ?>"/>
                            <input type="file" name="image_file" id="image_file_upload"/>
                            <div  style="left: 84%;top: 21%" class="upload_loading" id="loading"><img width="50px"src="<?php echo base_url(); ?>processing.gif"></div>
                        </div>
                    </form>
                    <p id="hoac"><?php echo lang('createcover_or') ?></p>
                    <p id="chon"><?php echo lang('createcover_choose') ?></p>
                </div>

                <div id="show">
                    <div id="tshow">						

                        <input style="cursor:pointer" type="button" onclick="loadAlbums()" value="<?php echo lang('button_back') ?>"/>

                        <p >
                            <span id="album_name">Albums <?php echo lang('createcover_of') ?> <?php echo $user['name'] ?></span>
                            <span id="number_item"> (<?php echo count($albums) ?>)</span>
                        </p>
                    </div>
                    <div id="loading"><img width="50px"src="<?php echo base_url(); ?>processing.gif"></div>
                    <div id="list" class="list-image">						
                        <ul id="container-list-images">						
                            <?php foreach ($albums as $item) { ?>								
                                <li>								   
                                    <div class="albu" onclick="loadPhotosAlbum('<?php echo $item['aid'] ?>','<?php echo mb_substr($item["albumName"], 0, 40); ?>')">
                                        <div class="container-image"style="background-image: url('<?php echo $item["src_big"] ?>');">
                                        </div>									
                                        <p>
                                            <?php echo mb_substr($item["albumName"], 0, 40); ?>
                                        </p>
                                        <p><span><?php echo $item["count"] ?> <?php echo lang('createcover_image') ?></span></p>
                                    </div>								
                                </li>								
                                <?php
                            }
                            ?>
                        </ul>					
                    </div>
                </div><!--End #Show-->
                <div class="line"></div>
                <div id="start">
                    <p><?php echo lang('createcover_moveimage') ?></p>
                    <div id="container-image">
                        <img id="crop_frame"style="z-index:1000;position:absolute;width:100%" src="<?php echo base_url(); ?>images/crop_frame.png" alt="Eyered"/>
                        <img id="target_image"style="display:none;z-index:999;position:absolute;width:100%"src="http://sphotos-b.xx.fbcdn.net/hphotos-snc6/s720x720/603508_459957234022327_1805324670_n.jpg" />
                        <div style="display: none" id="convertImageContainer"><canvas style="display: none" id="convert_target_image"></canvas></div>
                        <div id="target_image_loading" style="display: none;"><img width="150px" src="<?php echo base_url(); ?>processing.gif"></div>
                    </div>
                </div>
                <div  style="width: 750px; margin: 0px auto;">
                    <script type="text/javascript">
                        var colorSelectHtml = "";
                        var convertTagrgetImageObject = "";
                        $(document).ready(function(){
                            convertTagrgetImageObject = $("#convertImageContainer").html();
                            colorSelectHtml = $("#color-select-container").html();
                            createColorEffect("<?php echo base_url(); ?>caman_proxy.php?cw=67&ch=50&h=50&url=http://sphotos-d.ak.fbcdn.net/hphotos-ak-prn1/561715_515326481818735_1455254583_n.jpg");
                        })
                        function addEffect(id){
                            var action=confirm("<?php echo lang('createcover_addeffect') ?>")
                            if (action==true)
                            {
                                $("#target_image_loading").show();
                                $("#convertImageContainer").html(convertTagrgetImageObject);
                                //alert(image_select);
                                if(id=="normal"){
                                    $("#target_image").attr("src",image_select);
                                    $("#target_image_loading").hide();
                                    return;
                                }
                                //alert("http://localhost<?php echo base_url(); ?>caman_proxy.php?url="+image_select);
                                Caman("#convert_target_image","<?php echo base_url(); ?>caman_proxy.php?url="+image_select, function() {
                                    if(id=="vintage")
                                        this.vintage();
                                    if(id=="lomo")
                                        this.lomo();
                                    if(id=="clarity")
                                        this.clarity();
                                    if(id=="sincity")
                                        this.sinCity();
                                    if(id=="sunrise")
                                        this.sunrise();
                                    if(id=="crossProcess")
                                        this.crossProcess();
                                    if(id=="orangePeel")
                                        this.orangePeel();
                                    if(id=="love")
                                        this.love();
                                    if(id=="grungy")
                                        this.grungy();
                                    if(id=="jarques")
                                        this.jarques();
                                    if(id=="pinhole")
                                        this.pinhole();
                                    if(id=="oldBoot")
                                        this.oldBoot();
                                    if(id=="glowingSun")
                                        this.glowingSun();
                                    if(id=="hazyDays")
                                        this.hazyDays();
                                    if(id=="herMajesty")
                                        this.herMajesty();
                                    if(id=="nostalgia")
                                        this.nostalgia();
                                    if(id=="hemingway")
                                        this.hemingway();
                                    if(id=="concentrate")
                                        this.concentrate();
                                    this.render(function(){
                                        $("#target_image").attr("src",this.toBase64())
                                        $("#target_image_loading").hide();
                                    });
                                    //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                                });
                            }
                            
                        }
                        function createColorEffect(url){
                            $("#color-select-container").html(colorSelectHtml);
                            Caman("#normal-select",url, function() {
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#vintage-select",url, function() {
                                this.vintage();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#lomo-select",url, function() {
                                this.lomo();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#clarity-select",url, function() {
                                this.clarity();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#sincity-select",url, function() {
                                this.sinCity();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#sunrise-select",url, function() {
                                this.sunrise();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#crossProcess-select",url, function() {
                                this.crossProcess();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#orangePeel-select",url, function() {
                                this.orangePeel();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#love-select",url, function() {
                                this.love();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#grungy-select",url, function() {
                                this.grungy();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#jarques-select",url, function() {
                                this.jarques();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#pinhole-select",url, function() {
                                this.pinhole();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#oldBoot-select",url, function() {
                                this.oldBoot();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#glowingSun-select",url, function() {
                                this.glowingSun();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#hazyDays-select",url, function() {
                                this.hazyDays();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#herMajesty-select",url, function() {
                                this.herMajesty();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#nostalgia-select",url, function() {
                                this.nostalgia();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#hemingway-select",url, function() {
                                this.hemingway();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            Caman("#concentrate-select",url, function() {
                                this.concentrate();
                                this.render(function(){});
                                //$("#target_image").attr("src",this.toBase64()).show().css("top","0").css("left","0");
                            });
                            $('#color-select').jcarousel({						
                                itemFallbackDimension: 125					
                            });
                        }
                    </script>
                    <div id="color-select-container" style="display: none">
                        <div id="color-select">
                            <ul id="container-list-color">
                                <li>
                                    <div onclick="addEffect('normal')" class="color-item" >
                                        <canvas id="normal-select"></canvas>
                                        <p>Normal</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('vintage')" class="color-item" >
                                        <canvas id="vintage-select"></canvas>
                                        <p>Vintage</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('lomo')" class="color-item" >
                                        <canvas id="lomo-select"></canvas>
                                        <p>Lomo</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('clarity')" class="color-item" >
                                        <canvas id="clarity-select"></canvas>
                                        <p>Clarity</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('sincity')" class="color-item" >
                                        <canvas id="sincity-select"></canvas>
                                        <p>Sin City</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('sunrise')" class="color-item" >
                                        <canvas id="sunrise-select"></canvas>
                                        <p>Sunrise</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('crossProcess')" class="color-item" >
                                        <canvas id="crossProcess-select"></canvas>
                                        <p>Cross Process</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('orangePeel')" class="color-item" >
                                        <canvas id="orangePeel-select"></canvas>
                                        <p>Orange Peel</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('love')" class="color-item" >
                                        <canvas id="love-select"></canvas>
                                        <p>Love</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('grungy')" class="color-item" >
                                        <canvas id="grungy-select"></canvas>
                                        <p>Grungy</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('jarques')" class="color-item" >
                                        <canvas id="jarques-select"></canvas>
                                        <p>Jarques</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('pinhole')" class="color-item" >
                                        <canvas id="pinhole-select"></canvas>
                                        <p>Pinhole</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('oldBoot')" class="color-item" >
                                        <canvas id="oldBoot-select"></canvas>
                                        <p>Old Boot</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('glowingSun')" class="color-item" >
                                        <canvas id="glowingSun-select"></canvas>
                                        <p>Glowing Sun</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('hazyDays')" class="color-item" >
                                        <canvas id="hazyDays-select"></canvas>
                                        <p>Hazy Days</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('herMajesty')" class="color-item" >
                                        <canvas id="herMajesty-select"></canvas>
                                        <p>Her Majesty</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('nostalgia')" class="color-item" >
                                        <canvas id="nostalgia-select"></canvas>
                                        <p>Nostalgia</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('hemingway')" class="color-item" >
                                        <canvas id="hemingway-select"></canvas>
                                        <p>Hemingway</p>
                                    </div>
                                </li>
                                <li>
                                    <div onclick="addEffect('concentrate')" class="color-item" >
                                        <canvas id="concentrate-select"></canvas>
                                        <p>Concentrate</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div id="botcv3">
                    <input style="cursor:pointer"onclick="startCrop()"type="button" value="<?php echo lang('button_startcreatecover') ?>"/>
                </div>


            </div><!--End #Content-->
            <div id="footer">
                <p>Copyrights &COPY; 2012 by Eyered | Email admin@eyered.net<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Feyeredsoftware&amp;send=false&amp;layout=button_count&amp;width=200&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=113698288782115" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; float: right; width: 98px; height: 21px; margin-top: 12px;" allowTransparency="true"></iframe></p>
            </div><!--End #Footer-->
        </div><!--End #Wrapper-->
    </body>
</html>
